<template>
	<div style="display: flex;flex-direction: column;" class="otherPage searchPage">
		<Header :selected="10"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''">
			</div>
		</div>
		<Navigation :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="2">
		</Navigation>
		<div class="content">
			<div class="content_bg" v-loading="loading">
				<el-row :gutter="6">
					<el-col :span="24" class="newArea" v-for="(news, index) in newsList" :key="index">
						<div class="news-list">
							<el-row :gutter="6" class="news-item" :class="{ 'hover': hoverIndex === index }"
								@mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1">

								<el-col v-if="news.fileUrl" :span="3" class="newsImg">
									<div>
										<el-image style="height:14vh;width:100%;" :src="news.fileUrl"></el-image>
									</div>
								</el-col>
								<el-col v-else :span="3" class="date">
									<div>
										<div class="day"> {{ formatDate(news.createTime, 'DD') }}</div>
										<div class="month-year">{{ formatDate(news.createTime, 'yyyy-MM') }}</div>
									</div>
								</el-col>
								<el-col :span="18" class="newcontent">
									<div class="newcontentcontainer" @click="goToDetail(news.id,news.type)">
										<div class="title">{{ news.titles }}</div>
										<!-- <div class="description">
											<p>{{$request.formartContent(news.content) }}</p>
										</div> -->
									</div>
								</el-col>
								<el-col :span="3" style="background-color: #F6F6F6;height: 14vh;">
									<div @click="goToDetail(news.id,news.type)" class="moreInfoBtn">
										{{$t("moreDetails")}}
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>

				<el-row v-if="newsList&&newsList.length>0" :gutter="24" type="flex" class="paginationArea">
					<el-pagination background :current-page.sync="currentPage" :page-size="pageSize"
						layout=" prev, pager, next,jumper" :total="total" :prev-text="$t('previousPage')"
						:next-text="$t('nextPage')" @current-change="handleCurrentChange" />
				</el-row>


				<el-row v-else style="text-align: center;">
					{{$t('noDataTip')}}
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../src/components/common/header/Header.vue'
	import Navigation from '../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../src/components/common/footer/Footer.vue'
	import Pagination from '../../src/components/common/Pagination.vue'
	import {
		corporateNews
	} from '../utils/menu.js'
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination,
		},
		data() {
			return {
				loading: true,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				pageSize: 10,
				total: 0,
				currentPage: 1,
				menus: [],
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//搜索	
						label: this.$t('search'),
						to: '/search'
					},

				],

				searchKey: '',
				newsList: [
					// 添加更多新闻...
				],
				hoverIndex: -1
			};
		},
		computed: {},
		created() {
			this.bindBg();
			this.searchKey = this.$route.query.searchKey;
		},
		mounted() {
			this.bindList();
		},
		watch: {
			$route(to, from) {
				// 处理参数变化的情况
				if (to.path === from.path && to.query.searchKey !== from.query.searchKey) {
					this.searchKey = to.query.searchKey;
					this.bindList();
				}
			}
		},
		methods: {
			bindBg() {
				let params = {};

				this.$request.searchBgImage(params).then(res => {
					this.bg_img = res.data.fileUrl;
				}).catch((error) => {
					console.log(error);
				});
			},
			cleanText(htmlText) {
				htmlText = htmlText.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
				const sanitizedHTML = DOMPurify.sanitize(htmlText);
				const div = document.createElement('div');
				div.innerHTML = sanitizedHTML;
				return div.textContent || div.innerText || '';
			},
			formatDate(date, format) {
				const dateObj = new Date(date);
				const year = dateObj.getFullYear();
				const month = String(dateObj.getMonth() + 1).padStart(2, '0');
				const day = String(dateObj.getDate()).padStart(2, '0');

				// 根据传入的格式进行处理
				if (format === 'yyyy-MM') {
					return `${year}-${month}`;
				} else if (format === 'DD') {
					return day;
				}
				return date;
			},

			/**
			 * 获取企业新闻列表
			 */
			bindList() {
				this.loading = true;
				let params = {
					pageNum: this.currentPage,
					pageSize: this.pageSize,
					content: this.searchKey
				};
				let that = this;
				that.$request.searchList(params).then(res => {
					this.loading = false;
					if (res.code != 1000) {

						this.$notify({
							message: res.message,
							position: 'bottom-right',
							type: 'warning'
						});
						return;
					}
					this.newsList = res.data.records;
					this.pageSize = res.data.size;
					this.total = res.data.total;
					this.currentPage = res.data.current;


				}).catch((error) => {
					console.log(error);
				});
			},
			//获取点击页码，请求接口
			handleCurrentChange(currentPage) {

				this.currentPage = currentPage;
				this.bindList();
			},
			//////跳转详情页面
			goToDetail(id, type) {
				let path = ''
				//type     类型（1党建资讯 2企业动态 3公示公告 4科技研发 5重要公告 6招标公告 7中标公告 8流标公告 9人力公告）
				switch (type) {
					case '1':
						path = this.$t("partyBuildingInNewsDetail");
						break;
					case '2':
						path = this.$t("enterpriseDynamicsDetail");
						break;
					case '3':
						path = this.$t("publicAnnouncementDetail");
						break;
					case '4':
						path = this.$t("scientificResearchInfo");
						break;
					case '5':
						path = this.$t("importantAnnouncementInfo");
						break;
					case '6':
						path = this.$t("tenderAnnouncementInfo");
						break;
					case '7':
						path = this.$t("bidAnnouncementInfo");
						break;
					case '8':
						path = this.$t("failedBidAnnouncementInfo");
						break;
					case '9':
						path = this.$t("manpowerAnnouncementInfo");
						break;
					default:
						break;
				}
				if (!path) {

					this.$notify({
						message: this.$t('tipNoSarch'),
						position: 'bottom-right',
						type: 'warning'
					});

					return;
				}
				this.$router.push({
					name: path,
					query: {
						id: id,
					}
				});
			},

		}
	}
</script>

<style scoped>
	@import url("../components/common/css/corporateNews/corporateNews.css");

	.searchPage .newArea {
		height: auto;
	}

	.searchPage .paginationArea {
		height: 70px;
		line-height: 70px;
		justify-content: center;
		padding-top: 20px;
	}

	.searchPage .moreInfoBtn {
		width: 97px;
		height: 30px;
		line-height: 30px;
		border: 1px solid #EB7F20;
		border-radius: 4px;
		text-align: center;
		color: #EB7F20;
		margin-top: calc((14vh - 30px)/2);
		margin-left: calc((100% - 97px)/2);
	}

	.searchPage .moreInfoBtn:hover {
		background-color: #EB7F20;
		color: #FFF;
	}

	.searchPage .news-list .news-item {
		height: 14vh;
		margin-bottom: 1vh;
	}

	.searchPage .news-list .news-item:hover .title {
		color: #0484D7;
	}

	.searchPage .news-list .day {
		text-align: center;
		font-size: 57px;
		padding-top: 20px;
		height: 114px;
	}

	.searchPage .news-list .month-year {
		text-align: center;
		font-size: 18px;
	}

	.searchPage .btn-next span {
		min-width: 50px !important;
	}

	.el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px !important;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.news-item {
		margin-bottom: 20px;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.searchPage .news-list .newcontent .title {
		font-size: 1.5rem;
		font-weight: 530;
		height: 14vh;
		line-height: 14vh;
		align-items: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 0px 10px;
	}

	.searchPage .news-item .date {
		background-color: #0484D7;
		color: #FFF;
	}

	.searchPage .news-item:hover {
		transform: scale(0.98)
	}

	.searchPage .news-item:hover .date {
		background-color: #0484D7;
		opacity: 0.8;
		color: #FFF;
	}

	.searchPage .news-list .newcontentcontainer {
		height: 14vh;
		width: 100%;
		background-color: #F6F6F6;
	}

	::v-deep .el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	@media (max-width: 768px) {
		.searchPage .content {
			padding: 0px;
		}

		.searchPage .content_bg {
			padding: 10px;
		}

		.searchPage .moreInfoBtn {
			width: 43px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #eb7f20;
			border-radius: 4px;
			text-align: center;
			color: #eb7f20;
			margin-top: calc((14vh - 30px)/2);
			margin-left: 0px;
			font-size: 10px;
		}

		.searchPage .news-list .day {
			text-align: center;
			font-size: 28px;
			padding-top: 20px;
			height: 72px;
		}


		.searchPage .news-list .month-year {
			text-align: center;
			font-size: 10px;
		}

		.searchPage .news-list .newcontent .title {
			font-size: 14px;
		}
	}


	@media (max-width: 1024px) {
/* 		.searchPage .content {
			padding: 0px;
		}

		.searchPage .content_bg {
			padding: 10px;
		}
 */
		.searchPage .moreInfoBtn {
			width: 43px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #eb7f20;
			border-radius: 4px;
			text-align: center;
			color: #eb7f20;
			margin-top: calc((14vh - 30px)/2);
			margin-left: 0px;
			font-size: 10px;
		}

		.searchPage .news-list .day {
			text-align: center;
			font-size: 28px;
			padding-top: 20px;
			height: 72px;
		}


		.searchPage .news-list .month-year {
			text-align: center;
			font-size: 10px;
		}

		.searchPage .news-list .newcontent .title {
			font-size: 14px;
		}
	}
</style>
